<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/core.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script type="text/javascript" src="assets/js/plugins/ui/prism.min.js"></script>
	
	<script type="text/javascript" src="assets/js/core/app.js"></script>
	<script type="text/javascript" src="assets/js/pages/sidebar_detached_sticky_native.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-detached" class="has-detached-right">

	<!-- Main navbar -->
	<div class="navbar navbar-default navbar-lg header-highlight">
		<div class="navbar-header">
			<a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""></a>

			<ul class="nav navbar-nav pull-right visible-xs-block">
				<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
				<li><a class="sidebar-mobile-main-toggle"><i class="icon-paragraph-justify3"></i></a></li>
				<li><a class="sidebar-mobile-detached-toggle"><i class="icon-grid7"></i></a></li>
			</ul>
		</div>

		<div class="navbar-collapse collapse" id="navbar-mobile">
			<ul class="nav navbar-nav">
				<li><a class="sidebar-control sidebar-main-hide hidden-xs"><i class="icon-paragraph-justify3"></i></a></li>
				<li><a class="sidebar-control sidebar-detached-hide hidden-xs"><i class="icon-drag-right"></i></a></li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li><a href="other_changelog.html#roadmap.html">Roadmap</a></li>
				<li><a href="other_changelog.html">Changelog <span class="label label-inline bg-warning-400 position-right">v. 0.0</span></a></li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				<div class="sidebar-content">

	        		<!-- Support -->
					<div class="sidebar-category no-margin">
						<div class="category-title">
							<span>Have questions?</span>
							<i class="icon-help text-muted pull-right"></i>
						</div>

						<div class="category-content">
							<a href="http://themeforest.net/user/kopyov" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy position-left"></i> Limitless support</a>
						</div>
					</div>
					<!-- /support -->


					<!-- Main navigation -->
					<div class="sidebar-category">
						<div class="category-title">
							<span>Navigation</span>
							<i class="icon-menu7 text-muted pull-right"></i>
						</div>

						<div class="category-content no-padding">
							<ul class="navigation navigation-main navigation-accordion">

								<!-- Main -->
								<li class="navigation-header">Main</li>
								<li><a href="index.html">Introduction</a></li>
								<li><a href="main_getting_started.html">Getting started</a></li>
								<li><a href="main_starter_kit.html">Starter kit</a></li>

								<li class="navigation-header">Basic functionality</li>								
								<li><a href="base_less_css.html">LESS and CSS</a></li>
								<li>
									<a href="#">Plugins</a>
									<ul>
										<li><a href="plugins_forms.html">Forms</a></li>
										<li><a href="plugins_forms_styling.html">Form styling</a></li>
										<li><a href="plugins_selects.html">Selects</a></li>
										<li><a href="plugins_editors.html">Editors</a></li>
										<li><a href="plugins_uploaders.html">Uploaders</a></li>
										<li><a href="plugins_wizards.html">Wizards</a></li>
										<li><a href="plugins_extensions.html">Extensions</a></li>
										<li><a href="plugins_notifications.html">Notifications</a></li>
										<li><a href="plugins_pickers.html">Pickers</a></li>
										<li><a href="plugins_tables.html">Tables</a></li>
										<li class="active"><a href="plugins_ui.html">UI</a></li>
										<li><a href="plugins_vis.html">Visualization</a></li>
									</ul>
								</li>
								<li><a href="base_bootstrap.html">Bootstrap</a></li>
								<li><a href="base_color_system.html">Color system</a></li>
								<li><a href="base_helpers.html">Helpers</a></li>

								<li class="navigation-header">Layout options</li>
								<li><a href="layout_markup.html">Markup</a></li>
								<li><a href="layout_sidebars.html">Sidebars</a></li>
								<li><a href="layout_navbars.html">Navbars</a></li>
								<li><a href="layout_v_nav.html">Vertical navigation</a></li>
								<li><a href="layout_h_nav.html">Horizontal navigation</a></li>
								<li><a href="layout_page_header.html">Page header</a></li>
								<li><a href="layout_footer.html">Footer</a></li>

								<li class="navigation-header">Other</li>
								<li><a href="other_credits.html">Sources and credits</a></li>
								<li><a href="other_changelog.html">Changelog <span class="label bg-warning-400">Version 0.0</span></a></li>
								<!-- /main -->

							</ul>
						</div>
					</div>
					<!-- /main navigation -->

				</div>
			</div>
			<!-- /main sidebar -->


			<!-- Main content -->
			<div class="content-wrapper">

				<!-- Page header -->
				<div class="page-header">
					<div class="page-header-content">
						<div class="page-title">
							<h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">Limitless</span> - UI</h4>
						</div>

						<div class="heading-elements">
							<ul class="breadcrumb">
								<li><a href="index.html"><i class="icon-home2 position-left"></i> Home</a></li>
								<li><a href="plugins_ui.html">Plugins</a></li>
								<li class="active">UI</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- /page header -->
				

				<!-- Content area -->
				<div class="content">

					<!-- Detached content -->
					<div class="container-detached">
						<div class="content-detached">

							<!-- Fancy tree -->
							<div class="panel panel-flat" id="fancytree">
								<div class="panel-heading">
									<h5 class="panel-title">Fancy tree</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Trees</span>
										<span class="heading-text text-muted">/trees/</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading. Main features:</p>

										<ul class="list">
											<li>Lazy loading and very efficient and performant handling of large data sets</li>
											<li>Keyboard navigation</li>
											<li>(Hierarchical) selection and checkboxes</li>
											<li>Table view (gridview)</li>
											<li>Drag and drop</li>
											<li>Persistence of expansion, selection and active state</li>
											<li>Inline editing</li>
											<li>Themable (comes with WinXP, Win7, Win8, OS X Lion, and Glyph samples)</li>
											<li>The tree behaves like a single form control, i.e. it is 'tabbable' (example)</li>
											<li>Rich object oriented API</li>
											<li>Extensible modular design</li>
											<li>and more ...</li>
										</ul>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load jQuery UI -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery_ui/full.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/trees/fancytree_all.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Add list markup -->
&lt;div class="tree-default">
	&lt;ul>
		&lt;li class="folder expanded">Expanded folder with children
			&lt;ul>
				&lt;li class="expanded">Expanded sub-item
					&lt;ul>
						&lt;li class="active focused">Active sub-item (active and focus on init)&lt;/li>
						&lt;li>Basic &lt;i>menu item&lt;/i> with &lt;strong class="text-semibold">HTML support&lt;/strong>&lt;/li>
					&lt;/ul>
				&lt;/li>
				&lt;li>Collapsed sub-item
					&lt;ul>
						&lt;li>Sub-item 2.2.1&lt;/li>
						&lt;li>Sub-item 2.2.2&lt;/li>
					&lt;/ul>
				&lt;/li>
			&lt;/ul>
		&lt;/li>
		&lt;li class="has-tooltip" title="Look, a tool tip!">Menu item with key and tooltip&lt;/li>
		&lt;li class="folder">Collapsed folder
			&lt;ul>
				&lt;li>Sub-item 1.1&lt;/li>
				&lt;li>Sub-item 1.2&lt;/li>
			&lt;/ul>
		&lt;/li>
		&lt;li class="selected">This is a selected item&lt;/li>
		&lt;li class="expanded">Document with some children (expanded on init)
			&lt;ul>
				&lt;li>Document sub-item&lt;/li>
				&lt;li>Another document sub-item
					&lt;ul>
						&lt;li>Sub-item 2.1.1&lt;/li>
						&lt;li>Sub-item 2.1.2&lt;/li>
					&lt;/ul>
				&lt;/li>
			&lt;/ul>
		&lt;/li>	
	&lt;/ul>
&lt;/div>
</code></pre>
										</div>

										<div class="content-group">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$(".tree-default").fancytree({
    init: function(event, data) {
        $('.has-tooltip .fancytree-title').tooltip();
    }
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Type</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>activeVisible</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Make sure that the active node is always visible, i.e. its parents are expanded</td>
													</tr>
													<tr>
														<td><code>ajax</code></td>
														<td class="text-semibold">-</td>
														<td>Object. Default options for ajax requests</td>
													</tr>
													<tr>
														<td><code>aria</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Add WAI-ARIA attributes to markup</td>
													</tr>
													<tr>
														<td><code>autoActivate</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Activate a node when focused with the keyboard</td>
													</tr>
													<tr>
														<td><code>autoCollapse</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Automatically collapse all siblings, when a node is expanded</td>
													</tr>
													<tr>
														<td><code>autoScroll</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Scroll node into visible area, when focused by keyboard</td>
													</tr>
													<tr>
														<td><code>checkbox</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Display checkboxes to allow selection</code></td>
													</tr>
													<tr>
														<td><code>clickFolderMode</code></td>
														<td class="text-semibold">4</td>
														<td>Integer. Defines what happens, when the user click a folder node. 1: <code>activate</code>, 2: <code>expand</code>, 3: <code>activate and expand</code>, 4: <code>activate/dblclick expands</code></td>
													</tr>
													<tr>
														<td><code>debugLevel</code></td>
														<td class="text-semibold">null</td>
														<td>Integer. 0..2 (null: use global setting <code>$.ui.fancytree.debugInfo</code>)</td>
													</tr>
													<tr>
														<td><code>defaultKey</code></td>
														<td class="text-semibold">null</td>
														<td>Callback(node) is called for ner nodes without a key. Must return a new unique key. (default <code>null</code>: generates default keys like that: "_" + counter)</td>
													</tr>
													<tr>
														<td><code>enableAspx</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Accept passing ajax data in a property named <code>`d`</code></td>
													</tr>
													<tr>
														<td><code>extensions</code></td>
														<td class="text-semibold">[]</td>
														<td>String[]. List of active extensions</td>
													</tr>
													<tr>
														<td><code>focusOnSelect</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Set focus when node is checked by a mouse click</td>
													</tr>
													<tr>
														<td><code>generateIds</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Add <code>id="..."</code> to node markup</td>
													</tr>
													<tr>
														<td><code>icons</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Display node icons</td>
													</tr>
													<tr>
														<td><code>idPrefix</code></td>
														<td class="text-semibold">"ft_"</td>
														<td>String. ID prefix</td>
													</tr>
													<tr>
														<td><code>imagePath</code></td>
														<td class="text-semibold">null, using 'skin/' subdirectory</td>
														<td>String. Path to a folder containing icons</td>
													</tr>
													<tr>
														<td><code>keyboard</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Support keyboard navigation</td>
													</tr>
													<tr>
														<td><code>keyPathSeparator</code></td>
														<td class="text-semibold">"/"</td>
														<td>String</td>
													</tr>
													<tr>
														<td><code>minExpandLevel</code></td>
														<td class="text-semibold">1</td>
														<td>Integer. 2: top-level nodes are not collapsible</td>
													</tr>
													<tr>
														<td><code>quicksearch</code></td>
														<td class="text-semibold">false</td>
														<td>Boolean. Navigate to next node by typing the first letters</td>
													</tr>
													<tr>
														<td><code>scrollOfs</code></td>
														<td class="text-semibold">{top: 0, bottom: 0}</td>
														<td>Object. Optional margins for <code>node.scrollIntoView()</code></td>
													</tr>
													<tr>
														<td><code>scrollParent</code></td>
														<td class="text-semibold">$container</td>
														<td>Scrollable container for <code>node.scrollIntoView()</code></td>
													</tr>
													<tr>
														<td><code>selectMode</code></td>
														<td class="text-semibold">2</td>
														<td>Integer. 1: <strong>single</strong>, 2: <strong>multi</strong>, 3: <strong>multi-hier</strong></td>
													</tr>
													<tr>
														<td><code>source</code></td>
														<td class="text-semibold">any</td>
														<td>Used to Initialize the tree</td>
													</tr>
													<tr>
														<td><code>strings</code></td>
														<td class="text-semibold">-</td>
														<td>Strings. Translation table</td>
													</tr>
													<tr>
														<td><code>tabbable</code></td>
														<td class="text-semibold">-</td>
														<td>Boolean. Add <code>tabindex='0'</code> to container, so tree can be reached using <kbd>tab</kbd></td>
													</tr>
													<tr>
														<td><code>titlesTabbable</code></td>
														<td class="text-semibold">-</td>
														<td>Boolean. Add <code>tabindex='0'</code> to node title span, so it can receive keyboard focus</td>
													</tr>
													<tr>
														<td><code>toggleEffect</code></td>
														<td class="text-semibold">{ effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 }</td>
														<td>Object. Animation options, <code>false</code>: <strong>off</strong></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin events</h6>
										<p>Events are called like this: <code>`CALLBACK_NAME(event, data)`</code> where <code>`event`</code> is a jQuery Event object and <code>`data`</code> is of type EventData The <code>`this`</code> context is set to tree's the HTMLDivElement:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Event</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>activate</code></td>
														<td><strong>`data.node`</strong> was activated</td>
													</tr>
													<tr>
														<td><code>beforeActivate</code></td>
														<td><strong>`data.node`</strong> is about to tbe (de)activated. Current status is <code>data.node.isActive()</code>. Return <code>false</code> to prevent default processing</td>
													</tr>
													<tr>
														<td><code>beforeExpand</code></td>
														<td><strong>`data.node`</strong> is about to tbe collapsed/expanded. Current status is <code>data.node.isExpanded()</code>. Return <code>false</code> to prevent default processing</td>
													</tr>
													<tr>
														<td><code>beforeSelect</code></td>
														<td><strong>`data.node`</strong> is about to tbe (de)selected. Current status is <strong>data.node.isSelected()</strong>. Return <code>false</code> to prevent default processing</td>
													</tr>
													<tr>
														<td><code>blur</code></td>
														<td><strong>`data.node`</strong> lost keyboard focus</td>
													</tr>
													<tr>
														<td><code>blurTree</code></td>
														<td><strong>`data.tree`</strong> lost keyboard focus</td>
													</tr>
													<tr>
														<td><code>click</code></td>
														<td><strong>`data.node`</strong> was clicked. <strong>`data.targetType`</strong> contains the region ("title", "expander", ...). Return <code>false</code> to prevent default processing, i.e. activating, expanding, selecting, etc</td>
													</tr>
													<tr>
														<td><code>collapse</code></td>
														<td><strong>`data.node`</strong> was collapsed</td>
													</tr>
													<tr>
														<td><code>create</code></td>
														<td>Widget was created (called only once, even if re-initialized)</td>
													</tr>
													<tr>
														<td><code>createNode</code></td>
														<td>Allow tweaking and binding, after node was created for the first time (NOTE: this event is only available as callback, but not for <code>bind()</code>)</td>
													</tr>
													<tr>
														<td><code>dblclick</code></td>
														<td><strong>`data.node`</strong> was double-clicked. <strong>`data.targetType`</strong> contains the region ("title", "expander", ...). Return <code>false</code> to prevent default processing, i.e. expanding, etc</td>
													</tr>
													<tr>
														<td><code>deactivate</code></td>
														<td><strong>`data.node`</strong> was deactivated</td>
													</tr>
													<tr>
														<td><code>expand</code></td>
														<td><strong>`data.node`</strong> was expanded</td>
													</tr>
													<tr>
														<td><code>focus</code></td>
														<td><strong>`data.node`</strong> received keyboard focus</td>
													</tr>
													<tr>
														<td><code>focusTree</code></td>
														<td><strong>`data.tree`</strong> received keyboard focus</td>
													</tr>
													<tr>
														<td><code>iconClass</code></td>
														<td>Allows to override the class names added to the <strong>`data.node`</strong> icon markup to define custom icons or glyphs</td>
													</tr>
													<tr>
														<td><code>init</code></td>
														<td>Widget was (re-)initialized</td>
													</tr>
													<tr>
														<td><code>keydown</code></td>
														<td><strong>`data.node`</strong> received key. <strong>`event.which`</strong> contains the key. Return <code>false</code> to prevent default processing, i.e. navigation. Call <strong>`data.result = "preventNav";`</strong> to prevent navigation but still allow default handling inside embedded input controls</td>
													</tr>
													<tr>
														<td><code>keypress</code></td>
														<td>(currently unused)</td>
													</tr>
													<tr>
														<td><code>lazyLoad</code></td>
														<td><strong>`data.node`</strong> is a lazy node that is expanded for the first time. The new child data must be returned in the <strong>`data.result`</strong> property (see <code>source</code> option for available formats)</td>
													</tr>
													<tr>
														<td><code>loadChildren</code></td>
														<td>Node data was loaded, i.e. <strong>`node.nodeLoadChildren()`</strong> finished</td>
													</tr>
													<tr>
														<td><code>loadError</code></td>
														<td>A load error occurred. Return <code>false</code> to prevent default processing</td>
													</tr>
													<tr>
														<td><code>postProcess</code></td>
														<td>Allows to modify the ajax response</td>
													</tr>
													<tr>
														<td><code>removeNode</code></td>
														<td><strong>`data.node`</strong> was removed (NOTE: this event is only available as callback, but not for <code>bind()</code>)</td>
													</tr>
													<tr>
														<td><code>renderColumns</code></td>
														<td>(used by table extension)</td>
													</tr>
													<tr>
														<td><code>renderNode</code></td>
														<td>Allow tweaking after node state was rendered (NOTE: this event is only available as callback, but not for <code>bind()</code>)</td>
													</tr>
													<tr>
														<td><code>renderTitle</code></td>
														<td>Allow replacing the <code>'&lt;span class='fancytree-title'>`</code> markup (NOTE: this event is only available as callback, but not for <code>bind()</code>)</td>
													</tr>
													<tr>
														<td><code>restore</code></td>
														<td>Text-persist has expanded, selected, and activated the previous state</td>
													</tr>
													<tr>
														<td><code>select</code></td>
														<td><strong>`data.node`</strong> was selected</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>fancytree_all.min.js, fancytree_childcounter.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/trees/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://fooplugins.com/plugins/footable-jquery/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="https://github.com/mar10/fancytree/wiki" class="btn btn-sm bg-brown btn-labeled" target="_blank">
																	<b><i class="icon-book"></i></b>
																	Project wiki
																</a>
															</p>

															<p>
																<a href="http://wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html" class="btn btn-sm bg-slate btn-labeled" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<p>
																<a href="http://wwwendt.de/tech/fancytree/demo/" class="btn btn-sm bg-teal-400 btn-labeled" target="_blank">
																	<b><i class="icon-file-eye"></i></b>
																	Demonstration
																</a>
															</p>
															
															<a href="https://github.com/mar10/fancytree/" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /fancytree -->


							<!-- Full calendar -->
							<div class="panel panel-flat" id="fullcalendar">
								<div class="panel-heading">
									<h5 class="panel-title">Full calendar</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Calendars</span>
										<span class="heading-text text-muted">/ui/fullcalendar/</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load Moment.js extensions -->
&lt;script type="text/javascript" src="assets/js/plugins/ui/moment/moment.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/ui/fullcalendar/fullcalendar.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Add DIV element -->
&lt;div class="fullcalendar-basic">&lt;/div>
</code></pre>
										</div>

										<div class="content-group">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$('.fullcalendar-basic').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    events: [
        {
            title: 'All Day Event',
            start: '2014-11-01'
        },
        {
            title: 'Long Event',
            start: '2014-11-07',
            end: '2014-11-10'
        },
        ...
    ]
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Fullcalendar documentation</h6>
										<p>Complete Fullcalendar documentation can be found online on <a href="http://fullcalendar.io/docs/" target="_blank">Official library website</a>. It's quite big, with a lot of options, events and methods. Also check out <a href="http://fullcalendar.io/docs/google_calendar/" target="_blank">Google Calendar integration</a>. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Fullcalendar library.</p>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>fullcalendar.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/ui/fullcalendar/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://fullcalendar.io/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://fullcalendar.io/docs/" class="btn btn-sm bg-slate btn-labeled" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/fullcalendar/fullcalendar" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /full calendar -->


							<!-- Headroom -->
							<div class="panel panel-flat" id="headroom">
								<div class="panel-heading">
									<h5 class="panel-title">Headroom</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Navigation</span>
										<span class="heading-text text-muted">/ui/headroom/</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load core -->
&lt;script type="text/javascript" src="assets/js/plugins/ui/headroom/headroom.min.js">&lt;/script>

&lt;!-- Load jQuery plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/ui/headroom/headroom_jquery.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Add navbar markup -->
&lt;div class="navbar navbar-inverse navbar-fixed-top">
	&lt;div class="navbar-header">
		...
	&lt;/div>

	&lt;div class="navbar-collapse collapse" id="navbar-mobile">
		...
	&lt;/div>
&lt;/div>
</code></pre>
										</div>

										<div class="content-group">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$(".navbar-fixed-top").headroom({
    classes: {
        pinned: "headroom-top-pinned",
        unpinned: "headroom-top-unpinned"
    },
    offset: $('.navbar').outerHeight(),
    onUnpin : function() {
        $('.navbar .dropdown-menu').parent().removeClass('open');
    }
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">How does it work?</h6>
										<div class="content-group">
											<p>At it's most basic <code>headroom.js</code> simply adds and removes CSS classes from an element in response to a scroll event. This means you must supply your own CSS styles separately. The classes that are used in headroom.js that are added and removed are:</p>

											<pre><code class="language-markup">&lt;!-- Initially -->
&lt;div class="headroom">

&lt;!-- Scrolling down -->
&lt;div class="headroom headroom--unpinned">

&lt;!-- Scrolling up -->
&lt;div class="headroom headroom--pinned">
</code></pre>
										</div>

										<p>Relying on CSS classes affords <code>headroom.js</code> incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours - anything you can do with CSS you can do in response to the user's scroll.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<p>Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting Headroom.options. The structure of an options object is as follows:</p>
										
										<pre><code class="language-javascript">// Basic initialization
{
    // vertical offset in px before element is first unpinned
    offset : 0,

    // scroll tolerance in px before state changes
    tolerance : 0,

    // or you can specify tolerance individually for up/down scroll
    tolerance : {
        up : 5,
        down : 0
    },

    // css classes to apply
    classes : {

        // when element is initialised
        initial : "headroom",

        // when scrolling up
        pinned : "headroom--pinned",

        // when scrolling down
        unpinned : "headroom--unpinned",

        // when above offset
        top : "headroom--top",

        // when below offset
        notTop : "headroom--not-top"
    },

    // element to listen to scroll events on, defaults to `window`
    scroller : someElement,

    // callback when pinned, `this` is headroom object
    onPin : function() {},

    // callback when unpinned, `this` is headroom object
    onUnpin : function() {},

    // callback when above offset, `this` is headroom object
    onTop : function() {},

    // callback when below offset, `this` is headroom object
    onNotTop : function() {}
}
</code></pre>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>headroom.min.js, headroom_jquery.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/ui/headroom/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://wicky.nillia.ms/headroom.js/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://wicky.nillia.ms/headroom.js/playroom/" class="btn btn-sm bg-teal-400 btn-labeled" target="_blank">
																	<b><i class="icon-file-eye"></i></b>
																	Demonstration
																</a>
															</p>
															
															<a href="https://github.com/WickyNilliams/headroom.js" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /headroom -->


							<!-- Drilldown -->
							<div class="panel panel-flat" id="drilldown">
								<div class="panel-heading">
									<h5 class="panel-title">Drilldown</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Navigation</span>
										<span class="heading-text text-muted">drilldown.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<div class="content-group">
											<p>The jquery drill down menu plugin takes standard nested lists and turns them into iPod style drill down menus. Drill down menus offer an excellent way of managing and organising large, complicated menus in a small, vertical, compact and fixed-sized area. In term of useability they offer a great alternative to standard drop down menus, which can be cumbersome with multiple levels. This plugin uses the jquery cookie plugin by Klaus Hartl for saving the menu state between pages.</p>
											<p>The plugin is included to the main <code>drilldown.js</code> file.</p>
										</div>

										<p>Features of the drill down menu plugin include – saved state using cookies, add count of total number of child links to each menu option and offers 3 different ways to navigate:</p>
										<ul class="list">
											<li>Using a breadcrumb style menu at the top of the drill down menu</li>
											<li>A back button to return to previous options</li>
											<li>Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken</li>
										</ul>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/ui/drilldown.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Add list markup -->
&lt;ul id="drilldown">
	&lt;li>
		&lt;a href="#">Category&lt;/a>
		&lt;ul>
			&lt;li>
				&lt;a href="#">Range&lt;/a>
				&lt;ul>
					&lt;li>
						&lt;a href="#">Manufacturer 1&lt;/a>
						&lt;ul>
							&lt;li>&lt;a href="#">Product A&lt;/a>&lt;/li>
							&lt;li>&lt;a href="#">Product B&lt;/a>&lt;/li>
							&lt;li>&lt;a href="#">Product C&lt;/a>&lt;/li>
							&lt;li>&lt;a href="#">Product D&lt;/a>&lt;/li>
						&lt;/ul>
					&lt;/li>
					&lt;li>
						&lt;a href="#">Manufacturer 2&lt;/a>
						&lt;ul>
							&lt;li>&lt;a href="#">Product E&lt;/a>&lt;/li>
							&lt;li>&lt;a href="#">Product F&lt;/a>&lt;/li>
							&lt;li>&lt;a href="#">Product G&lt;/a>&lt;/li>
						&lt;/ul>
					&lt;/li>
				&lt;/ul>
			&lt;/li>
		&lt;/ul>
	&lt;/li>
&lt;/ul>
</code></pre>
										</div>

										<div class="content-group">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$('#drilldown').dcDrilldown({
    defaultText: 'Back to parent',
    saveState: true
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<p>There are several options, which can be configured for the drill down menu plugin. The default options are:</p>

										<pre><code class="language-javascript">// Default options
$.fn.dcDrilldown = function(options) {
    var defaults = {
        classWrapper: 'dd-wrapper',    // Allows you to change the wrapper for the menu
		classMenu: 'dd-menu',    // Set the class used for the menu
        classParent: 'dd-parent',    // Set the class used for parent li tags
        classParentLink: 'dd-parent-a',    // Set the class used for parent a tags
        classActive: 'active-ul',    // Set the class for active (clicked) links
        classHeader : 'dd-header',    // Set the class of the menu header - contains the breadcrumbs &amp; header tag
		eventType : 'click',    // Click or hover
		hoverDelay: 300,    // Hover event type delay
        saveState: true,    // If set to true the menu state will be saved using cookies - requires cookie plugin
        showCount: false,    // If set to true the count of the number of links for that option is inserted into the a tag
        classCount: 'dd-count',    // Set the class of the span containing the count
        classIcon: 'dd-icon',    // Set the class of the span for adding an icon to the parent links
        linkType: 'backlink',    // Selects the type of navigation - 3 options available (see below)
        resetText: 'All',    // The text used for the breadcrumb link that resets the menu
        headerTag: 'h6',    // The tag used for the menu header
        defaultText: 'Select Option',    // The default text inserted into the header when the menu is initialised
        includeHdr: true    // Set to false to remove the menu header tag
    };
};
</code></pre>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Options for navigation style</h6>
										<div class="content-group">
											<p>The menu offers 3 different ways to navigate back up the menu::</p>
											<ul class="content-list">
												<li>Using a breadcrumb style menu at the top of the drill down menu – set “linkType” to <strong>breadcrumb</strong></li>
												<li>A back button to return to previous options – set “linkType” to <strong>backlink</strong></li>
												<li>Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken – set “linkType” to <strong>link</strong></li>
											</ul>
										</div>

										<p>You can override any of these default options by passing an object into the Drill Down Menu method upon initialisation – e.g:</p>
										<pre><code class="language-javascript">// Overridden defaults
$('#drilldown').dcDrilldown({
        classParent: 'parent-class',
        classActive: 'active',
        linkType: 'link',
        saveState: false,
        resetText: 'Back To Start',
        defaultText: 'Choose An Option',
        includeHdr: false,
        showCount: true
    });
</code></pre>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>drilldown.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/ui/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<a href="http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/examples/" class="btn btn-sm bg-teal-400 btn-labeled" target="_blank">
																<b><i class="icon-file-eye"></i></b>
																Demonstration
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /drilldown -->


							<!-- Nicescroll -->
							<div class="panel panel-flat" id="nicescroll">
								<div class="panel-heading">
									<h5 class="panel-title">Nicescroll</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Styling</span>
										<span class="heading-text text-muted">nicescroll.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p class="content-group">Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style. Easy-to-use solution to have a custom scrollbars compatble with destkop, tablet and phone devices. Supports DIVs, IFrames, textarea, and document page (body) scrollbars. On modern browsers hardware accelerated scrolling has implemented. Using <code>animationFrame</code> for a smoothest and cpu-saving scrolling (when browser supports).</p>

										<p>Core features:</p>
										<ul class="list">
											<li>simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)</li>
											<li>very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)</li>
											<li>you can style main document scrollbar (body) too!! (not all script implements this feature)</li>
											<li>on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)</li>
											<li>scroll is smooth (as modern tablet browsing), speed is customizable</li>
											<li>zoom feature</li>
											<li>hardware accelerated scroll (where available)</li>
											<li>animation frame support for smoth scrolling and cpu-saving</li>
											<li>dragging scroll mode with scrolling momentum (as touch device)</li>
											<li>tested for all major browsers desktop and mobile versions</li>
											<li>support for touch devices</li>
											<li>support for multi-input devices (IE10 with MSPointer)</li>
											<li>compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!</li>
											<li>very customizable aspect of bar</li>
											<li>native scroll events are working yet</li>
											<li>fully integrated with jQuery</li>
											<li>compatibile with jQuery UI, jQuery Touch, jQuery Mobile</li>
										</ul>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/ui/nicescroll.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {  
    $("html").niceScroll();
});

// 2. Instance with object returned:
var nice = false;
$(document).ready(function() {  
    nice = $("html").niceScroll();
});

// 3. Style a DIV and chage cursor color:
$(document).ready(function() {  
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
});

// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
$(document).ready(function() {
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});
</code></pre>
										</div>

										<div class="content-group">
											<p>Some other options:</p>
											<pre><code class="language-javascript">// 1. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();

// 2. Hide scrollbars:
$("#mydiv").getNiceScroll().hide();

// 3. Check for scrollbars resize (when content or position have changed):
$("#mydiv").getNiceScroll().resize();

// 4. Scrolling to a position:
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<p>When you call <code>niceScroll</code> you can pass some parameters to custom visual aspects:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Type</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>cursorcolor</code></td>
														<td class="text-semibold">"#424242"</td>
														<td>Change cursor color in hex</td>
													</tr>
													<tr>
														<td><code>cursoropacitymin</code></td>
														<td class="text-semibold">0</td>
														<td>Change opacity when cursor is inactive (scrollabar <strong>"hidden"</strong> state), range from <code>1</code> to <code>0</code></td>
													</tr>
													<tr>
														<td><code>cursoropacitymax</code></td>
														<td class="text-semibold">1</td>
														<td>Change opacity when cursor is active (scrollabar <strong>"visible"</strong> state), range from <code>1</code> to <code>0</code></td>
													</tr>
													<tr>
														<td><code>cursorwidth</code></td>
														<td class="text-semibold">"5px"</td>
														<td>Cursor width in pixel (you can also write "5px")</td>
													</tr>
													<tr>
														<td><code>cursorborder</code></td>
														<td class="text-semibold">"1px solid #fff"</td>
														<td>CSS definition for cursor border</td>
													</tr>
													<tr>
														<td><code>cursorborderradius</code></td>
														<td class="text-semibold">"5px"</td>
														<td>Border radius in pixel for cursor</td>
													</tr>
													<tr>
														<td><code>zindex</code></td>
														<td class="text-semibold">"auto" | &lt;number></td>
														<td>Change <code>z-index</code> for scrollbar div</td>
													</tr>
													<tr>
														<td><code>scrollspeed</code></td>
														<td class="text-semibold">60</td>
														<td>Scrolling speed</td>
													</tr>
													<tr>
														<td><code>mousescrollstep</code></td>
														<td class="text-semibold">40</td>
														<td>Scrolling speed with mouse wheel (pixel)</td>
													</tr>
													<tr>
														<td><code>touchbehavior</code></td>
														<td class="text-semibold">false</td>
														<td>Enable cursor-drag scrolling like touch devices in desktop computer</td>
													</tr>
													<tr>
														<td><code>hwacceleration</code></td>
														<td class="text-semibold">true</td>
														<td>Use hardware accelerated scroll when supported</td>
													</tr>
													<tr>
														<td><code>boxzoom</code></td>
														<td class="text-semibold">false</td>
														<td>Enable zoom for box content</td>
													</tr>
													<tr>
														<td><code>dblclickzoom</code></td>
														<td class="text-semibold">true</td>
														<td>(Only when boxzoom = <code>true</code>) zoom activated when double click on box</td>
													</tr>
													<tr>
														<td><code>gesturezoom</code></td>
														<td class="text-semibold">true</td>
														<td>(Only when boxzoom = <code>true</code> and with touch devices) zoom activated when pinch out/in on box</td>
													</tr>
													<tr>
														<td><code>grabcursorenabled</code></td>
														<td class="text-semibold">true</td>
														<td>(Only when touchbehavior = <code>true</code>) display <strong>"grab"</strong> icon</td>
													</tr>
													<tr>
														<td><code>autohidemode</code></td>
														<td class="text-semibold">true</td>
														<td>
															<p>How hide the scrollbar works, possible values:</p>
															<ul class="list">
																<li><strong>true</strong> - hide when no scrolling</li>
																<li><strong>"cursor"</strong> - only cursor hidden</li>
																<li><strong>false</strong> - do not hide</li>
																<li><strong>"leave"</strong> - hide only if pointer leaves content</li>
																<li><strong>"hidden"</strong> - hide always</li>
																<li><strong>"scroll"</strong> - show only on scroll</li>
															</ul>
														</td>
													</tr>
													<tr>
														<td><code>background</code></td>
														<td class="text-semibold">""</td>
														<td>Change css for rail background</td>
													</tr>
													<tr>
														<td><code>iframeautoresize</code></td>
														<td class="text-semibold">true</td>
														<td>Autoresize iframe on load event</td>
													</tr>
													<tr>
														<td><code>cursorminheight</code></td>
														<td class="text-semibold">32</td>
														<td>Set the minimum cursor height (pixel)</td>
													</tr>
													<tr>
														<td><code>preservenativescrolling</code></td>
														<td class="text-semibold">true</td>
														<td>You can scroll native scrollable areas with mouse, bubbling mouse wheel event</td>
													</tr>
													<tr>
														<td><code>railoffset</code></td>
														<td class="text-semibold">false</td>
														<td>You can add offset top/left for rail position</td>
													</tr>
													<tr>
														<td><code>bouncescroll</code></td>
														<td class="text-semibold">false</td>
														<td>(Only hw accell) enable scroll bouncing at the end of content as mobile-like</td>
													</tr>
													<tr>
														<td><code>spacebarenabled</code></td>
														<td class="text-semibold">true</td>
														<td>Enable page down scrolling when space bar has pressed</td>
													</tr>
													<tr>
														<td><code>railpadding</code></td>
														<td class="text-semibold">{ top: 0, right: 0, left: 0, bottom: 0 }</td>
														<td>Set padding for rail bar</td>
													</tr>
													<tr>
														<td><code>disableoutline</code></td>
														<td class="text-semibold">true</td>
														<td>For chrome browser, disable outline (orange highlight) when selecting a div with nicescroll</td>
													</tr>
													<tr>
														<td><code>horizrailenabled</code></td>
														<td class="text-semibold">true</td>
														<td>Nicescroll can manage horizontal scroll</td>
													</tr>
													<tr>
														<td><code>railalign</code></td>
														<td class="text-semibold">right</td>
														<td>Alignment of vertical rail</td>
													</tr>
													<tr>
														<td><code>railvalign</code></td>
														<td class="text-semibold">bottom</td>
														<td>Alignment of horizontal rail</td>
													</tr>
													<tr>
														<td><code>enabletranslate3d</code></td>
														<td class="text-semibold">true</td>
														<td>Nicescroll can use css translate to scroll content</td>
													</tr>
													<tr>
														<td><code>enablemousewheel</code></td>
														<td class="text-semibold">true</td>
														<td>Nicescroll can manage mouse wheel events</td>
													</tr>
													<tr>
														<td><code>enablekeyboard</code></td>
														<td class="text-semibold">true</td>
														<td>Nicescroll can manage keyboard events</td>
													</tr>
													<tr>
														<td><code>smoothscroll</code></td>
														<td class="text-semibold">true</td>
														<td>Scroll with ease movement</td>
													</tr>
													<tr>
														<td><code>sensitiverail</code></td>
														<td class="text-semibold">true</td>
														<td>Click on rail make a scroll</td>
													</tr>
													<tr>
														<td><code>enablemouselockapi</code></td>
														<td class="text-semibold">true</td>
														<td>Can use mouse caption lock API (same issue on object dragging)</td>
													</tr>
													<tr>
														<td><code>cursorfixedheight</code></td>
														<td class="text-semibold">false</td>
														<td>Set fixed height for cursor in pixel</td>
													</tr>
													<tr>
														<td><code>hidecursordelay</code></td>
														<td class="text-semibold">400</td>
														<td>Set the delay in microseconds to fading out scrollbars</td>
													</tr>
													<tr>
														<td><code>directionlockdeadzone</code></td>
														<td class="text-semibold">6</td>
														<td>Dead zone in pixels for direction lock activation</td>
													</tr>
													<tr>
														<td><code>nativeparentscrolling</code></td>
														<td class="text-semibold">true</td>
														<td>Detect bottom of content and let parent to scroll, as native scroll does</td>
													</tr>
													<tr>
														<td><code>enablescrollonselection</code></td>
														<td class="text-semibold">true</td>
														<td>Enable auto-scrolling of content when selection text</td>
													</tr>
													<tr>
														<td><code>cursordragspeed</code></td>
														<td class="text-semibold">0.3</td>
														<td>Speed of selection when dragged with cursor</td>
													</tr>
													<tr>
														<td><code>rtlmode</code></td>
														<td class="text-semibold">"auto"</td>
														<td>Horizontal div scrolling starts at left side</td>
													</tr>
													<tr>
														<td><code>cursordragontouch</code></td>
														<td class="text-semibold">false</td>
														<td>Drag cursor in touch / touchbehavior mode also</td>
													</tr>
													<tr>
														<td><code>oneaxismousemode</code></td>
														<td class="text-semibold">"auto"</td>
														<td>It permits horizontal scrolling with mousewheel on horizontal only content, if <code>false</code> (vertical-only) mousewheel don't scroll horizontally, if value is <code>auto</code> detects two-axis mouse</td>
													</tr>
													<tr>
														<td><code>scriptpath</code></td>
														<td class="text-semibold">""</td>
														<td>Define custom path for boxmode icons ("" => same script path)</td>
													</tr>
													<tr>
														<td><code>preventmultitouchscrolling</code></td>
														<td class="text-semibold">true</td>
														<td>Prevent scrolling on multitouch events</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>nicescroll.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/ui/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://areaaperta.com/nicescroll/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="https://github.com/inuyaksa/jquery.nicescroll/wiki" class="btn btn-sm bg-brown btn-labeled" target="_blank">
																	<b><i class="icon-book"></i></b>
																	Project wiki
																</a>
															</p>

															<p>
																<a href="http://areaaperta.com/nicescroll/demo.html" class="btn btn-sm bg-teal-400 btn-labeled" target="_blank">
																	<b><i class="icon-file-eye"></i></b>
																	Demonstration
																</a>
															</p>
															
															<a href="https://github.com/inuyaksa/jquery.nicescroll" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /nicescroll -->


							<!-- NoUI slider -->
							<div class="panel panel-flat" id="noui">
								<div class="panel-heading">
									<h5 class="panel-title">NoUI slider</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Sliders</span>
										<span class="heading-text text-muted">nouislider.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices &amp; Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/sliders/nouislider.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add element with attributes:</p>
											<pre><code class="language-markup">&lt;!-- Add DIV element -->
&lt;div class="noui-slider-default">&lt;/div>
</code></pre>
										</div>

										<div class="content-group">
											<div class="content-group">
												<p>Call the plugin via JavaScript:</p>
												<pre><code class="language-javascript">// Basic initialization
$(".noui-slider-default").noUiSlider({
    start: [10, 50],
    connect: true,
    range: {
        'min': 0,
        'max': 60
    }
});
</code></pre>
											</div>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<p>noUiSlider can be configured with a wide variety of options, which can be use to customize the slider in to doing exactly what you want:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>start</code></td>
														<td class="text-semibold">Default: none <br> Accepted: number, array[number], array[number, number]</td>
														<td>The start option sets the number of handles and their start positions, relative to <code>range</code></td>
													</tr>
													<tr>
														<td><code>connect</code></td>
														<td class="text-semibold">Default: false <br> Accepted: "lower", "upper", true, false</td>
														<td>The connect setting can be used to control the (green) bar between the handles, or the edges of the slider. Use <code>"lower"</code> to connect to the lower side, or <code>"upper"</code> to connect to the upper side. Setting <code>true</code> sets the bar between the handles</td>
													</tr>
													<tr>
														<td><code>margin</code></td>
														<td class="text-semibold">Default: none <br> Accepted: number</td>
														<td>When using two handles, the minimum distance between the handles can be set using the <code>margin</code> option. The margin value is relative to the value set in <code>'range'</code>. This option is only available on standard linear sliders</td>
													</tr>
													<tr>
														<td><code>limit</code></td>
														<td class="text-semibold">Default: none <br> Accepted: number</td>
														<td>The <code>limit</code> option is the oposite of the margin option, limiting the maximum distance between two handles. As with the <code>margin</code> option, the <code>limit</code> option can only be used on linear sliders</td>
													</tr>
													<tr>
														<td><code>step</code></td>
														<td class="text-semibold">Default: none <br> Accepted: number</td>
														<td>By default, the slider slides fluently. In order to make the handles jump between intervals, you can use this option. The <code>step</code> option is relative to the values provided to range</td>
													</tr>
													<tr>
														<td><code>Orientation</code></td>
														<td class="text-semibold">Default: "horizontal" <br> Accepted: "vertical", "horizontal"</td>
														<td>The <code>orientation</code> setting can be used to set the slider to <code>"vertical"</code> or <code>"horizontal"</code></td>
													</tr>
													<tr>
														<td><code>Direction</code></td>
														<td class="text-semibold">Default: "ltr" <br> Accepted: "ltr", "rtl"</td>
														<td>By default the sliders are <strong>top-to-bottom</strong> and <strong>left-to-right</strong>, but you can change this using the direction option, which decides where the upper side of the slider is</td>
													</tr>
													<tr>
														<td><code>Animate</code></td>
														<td class="text-semibold">Default: true <br> Accepted: true, false</td>
														<td>Set the animate option to <code>false</code> to prevent the slider from animating to a new value with when calling <code>.val()</code></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Slider behaviour</h6>
										<p>noUiSlider offers several ways to handle user interaction. The range can be set to drag, and handles can move to taps. All these effects are optional, and can be enable by adding their keyword to the <code>behaviour</code> option. This option accepts a "-" separated list of <strong>"drag"</strong>, <strong>"tap"</strong>, <strong>"fixed"</strong>, <strong>"snap"</strong> or <strong>"none"</strong>.</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Behaviour</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>drag</code></td>
														<td>Make the <strong>range</strong> draggable. <strong>Handles</strong> are always draggable</td>
													</tr>
													<tr>
														<td><code>drag-fixed</code></td>
														<td>The range is draggable. The range width can't be changed, so dragging one handle will move the other, too</td>
													</tr>
													<tr>
														<td><code>tap</code></td>
														<td>Make the closest handle when the slider gets tapped</td>
													</tr>
													<tr>
														<td><code>tap-drag</code></td>
														<td>Make the closest handle jump when the slider bar is tapped, make the range draggable</td>
													</tr>
													<tr>
														<td><code>none</code></td>
														<td>Turn off all behaviour, except for standard moving</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>nouislider.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/sliders/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://refreshless.com/nouislider/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<a href="https://github.com/leongersen/noUiSlider" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /noUI slider -->


							<!-- Image cropper -->
							<div class="panel panel-flat" id="cropper">
								<div class="panel-heading">
									<h5 class="panel-title">Image cropper</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Media</span>
										<span class="heading-text text-muted">cropper.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>A simple jQuery image cropping plugin with enhanced features and suppot of: options, methods, events, touch devices, zomoing, rotation, scale, canvas and multiple croppers on the page.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/media/cropper.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Wrap the image or canvas element with a block element:</p>
											<pre><code class="language-markup">&lt;!-- Basic markup -->
&lt;div class="container">
	&lt;img src="picture.jpg">
&lt;/div>
</code></pre>
										</div>

										<div class="content-group">
											<p>Finally call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Initialize
$('.container > img').cropper({
	aspectRatio: 16 / 9,
	crop: function(e) {
		// Output the result data for cropping image.
		console.log(e.x);
		console.log(e.y);
		console.log(e.width);
		console.log(e.height);
		console.log(e.rotate);
		console.log(e.scaleX);
		console.log(e.scaleY);
	}
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<p>You may set cropper options with <code>$().cropper(options)</code>. If you want to change the global default options, you may use <code>$.fn.cropper.setDefaults(options)</code>.</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th style="width: 200px;">Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>aspectRatio</code></td>
														<td class="text-semibold">NaN</td>
														<td>Number. Set the aspect ratio of the crop box. By default, the crop box is free ratio</td>
													</tr>
													<tr>
														<td><code>data</code></td>
														<td class="text-semibold">null</td>
														<td>Object. The previous cropped data if you had stored, will be passed to <code>setData</code> method automatically</td>
													</tr>
													<tr>
														<td><code>preview</code></td>
														<td class="text-semibold">''</td>
														<td>String. Add extra elements (containers) for previewing</td>
													</tr>
													<tr>
														<td><code>strict</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. In strict mode, the canvas (image wrapper) cannot be smaller than the container, and the crop box cannot be outside of the canvas (image wrapper)</td>
													</tr>
													<tr>
														<td><code>responsive</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Rebuild the cropper when resize the window</td>
													</tr>
													<tr>
														<td><code>checkImageOrigin</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. By default, the plugin will check the image origin, and if it is a cross-origin image, a <code>crossOrigin</code> attribute will be added to the image element and a timestamp will be added to the image url to reload the image for <code>"getCroppedCanvas"</code>. By adding <code>crossOrigin</code> attribute to image will stop adding timestamp to image url, and stop reload of image</td>
													</tr>
													<tr>
														<td><code>modal</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Show the black modal above the image and under the crop box</td>
													</tr>
													<tr>
														<td><code>guides</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Show the dashed lines above the crop box</td>
													</tr>
													<tr>
														<td><code>center</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Show the center indicator above the crop box</td>
													</tr>
													<tr>
														<td><code>highlight</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Show the white modal above the crop box (highlight the crop box)</td>
													</tr>
													<tr>
														<td><code>background</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Show the grid background of the container</td>
													</tr>
													<tr>
														<td><code>autoCrop</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to crop the image automatically when initialize</td>
													</tr>
													<tr>
														<td><code>autoCropArea</code></td>
														<td class="text-semibold">0.8 (80% of the image)</td>
														<td>Number. A number between <code>0</code> and <code>1</code>. Define the automatic cropping area size (percentage)</td>
													</tr>
													<tr>
														<td><code>dragCrop</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to remove the current crop box and create a new one by dragging over the image</td>
													</tr>
													<tr>
														<td><code>movable</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to move the image</td>
													</tr>
													<tr>
														<td><code>rotatable</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to rotate the image</td>
													</tr>
													<tr>
														<td><code>scalable</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to scale the image</td>
													</tr>
													<tr>
														<td><code>zoomable</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to zoom the image</td>
													</tr>
													<tr>
														<td><code>mouseWheelZoom</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to zoom the image by wheeling mouse</td>
													</tr>
													<tr>
														<td><code>wheelZoomRatio</code></td>
														<td class="text-semibold">0.1</td>
														<td>Number. Define zoom ratio when zoom the image by wheeling mouse</td>
													</tr>
													<tr>
														<td><code>touchDragZoom</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to zoom the image by dragging touch</td>
													</tr>
													<tr>
														<td><code>cropBoxMovable</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to move the crop box</td>
													</tr>
													<tr>
														<td><code>cropBoxResizable</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to resize the crop box</td>
													</tr>
													<tr>
														<td><code>doubleClickToggle</code></td>
														<td class="text-semibold">true</td>
														<td>Boolean. Enable to toggle drag mode between <code>"crop"</code> and <code>"move"</code> when double click on the cropper</td>
													</tr>
													<tr>
														<td><code>minContainerWidth</code></td>
														<td class="text-semibold">200</td>
														<td>Number. The minimum width of the container</td>
													</tr>
													<tr>
														<td><code>minContainerHeight</code></td>
														<td class="text-semibold">100</td>
														<td>Number. The minimum height of the container</td>
													</tr>
													<tr>
														<td><code>minCanvasWidth</code></td>
														<td class="text-semibold">0</td>
														<td>Number. The minimum width of the canvas (image wrapper)</td>
													</tr>
													<tr>
														<td><code>minCanvasHeight</code></td>
														<td class="text-semibold">0</td>
														<td>Number. The minimum height of the canvas (image wrapper)</td>
													</tr>
													<tr>
														<td><code>minCropBoxWidth</code></td>
														<td class="text-semibold">0</td>
														<td>Number. The minimum width of the crop box</td>
													</tr>
													<tr>
														<td><code>minCropBoxHeight</code></td>
														<td class="text-semibold">0</td>
														<td>Number. The minimum height of the crop box</td>
													</tr>
													<tr>
														<td><code>build</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"build.cropper"</code> event</td>
													</tr>
													<tr>
														<td><code>built</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"built.cropper"</code> event</td>
													</tr>
													<tr>
														<td><code>cropstart</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"cropstart.cropper"</code> event</td>
													</tr>
													<tr>
														<td><code>cropmove</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"cropmove.cropper"</code> event</td>
													</tr>
													<tr>
														<td><code>cropend</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"cropend.cropper"</code> event</td>
													</tr>
													<tr>
														<td><code>crop</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"crop.cropper"</code> event</td>
													</tr>
													<tr>
														<td><code>zoom</code></td>
														<td class="text-semibold">null</td>
														<td>Function. A shortcut of the <code>"zoom.cropper"</code> event</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin events</h6>
										<div class="content-group">
											<p>Example usage:</p>

											<pre><code class="language-javascript">// Events example
$().on('cropstart.cropper', function (e) {
	console.log(e.type); // cropstart
	console.log(e.namespace); // cropper
	console.log(e.action); // ...
	console.log(e.originalEvent.pageX);

	// Prevent to start cropping, moving, etc if necessary
	if (e.action === 'crop') {
		e.preventDefault();
	}
});
</code></pre>
										</div>

										<p>Available events:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>build.cropper</code></td>
														<td>This event fires when a cropper instance starts to load an image</td>
													</tr>
													<tr>
														<td><code>built.cropper</code></td>
														<td>This event fires when a cropper instance has built completely</td>
													</tr>
													<tr>
														<td><code>cropstart.cropper</code></td>
														<td>This event fires when the canvas (image wrapper) or the crop box starts to change</td>
													</tr>
													<tr>
														<td><code>cropmove.cropper</code></td>
														<td>This event fires when the canvas (image wrapper) or the crop box is changing</td>
													</tr>
													<tr>
														<td><code>cropend.cropper</code></td>
														<td>This event fires when the canvas (image wrapper) or the crop box stops to change</td>
													</tr>
													<tr>
														<td><code>crop.cropper</code></td>
														<td>This event fires when the canvas (image wrapper) or the crop box changed</td>
													</tr>
													<tr>
														<td><code>zoom.cropper</code></td>
														<td>This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper)</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>cropper.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/media/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://fengyuanchen.github.io/cropper/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="https://github.com/fengyuanchen/cropper/blob/v1.0.0-rc.1/README.md" class="btn btn-sm bg-slate btn-labeled" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/fengyuanchen/cropper" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /image cropper -->


							<!-- Fancybox -->
							<div class="panel panel-flat" id="fancybox">
								<div class="panel-heading">
									<h5 class="panel-title">Fancybox</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Media</span>
										<span class="heading-text text-muted">fancybox.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/media/fancybox.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox:</p>
											<pre><code class="language-markup">&lt;!-- Image 1 -->
&lt;a class="fancybox" rel="group" href="big_image_1.jpg">
	&lt;img src="small_image_1.jpg" alt="">
&lt;/a>

&lt;!-- Image 1 -->
&lt;a class="fancybox" rel="group" href="big_image_2.jpg">
	&lt;img src="small_image_2.jpg" alt="">
&lt;/a>
</code></pre>
										</div>

										<div class="content-group">
											<p>Finally call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Initialize
$(document).ready(function() {
	$(".fancybox").fancybox({
		// options
	});
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<p>You can pass these options as key/value object to <code>fancybox()</code> method. It is also possible to modify defaults directly at fancyBox JS file or <code>$.fancybox.defaults</code></p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th style="width: 200px;">Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>padding</code></td>
														<td class="text-semibold">15</td>
														<td>Space inside fancyBox around content. Can be set as array - <code>[top, right, bottom, left]</code></td>
													</tr>
													<tr>
														<td><code>margin</code></td>
														<td class="text-semibold">20</td>
														<td>Minimum space between viewport and fancyBox. Can be set as array - <code>[top, right, bottom, left]</code>. Right and bottom margins are ignored if content dimensions exceeds viewport</td>
													</tr>
													<tr>
														<td><code>width</code></td>
														<td class="text-semibold">800</td>
														<td>Default width for <code>'iframe'</code> and <code>'swf'</code> content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be <code>numeric</code> or <code>'auto'</code>.</td>
													</tr>
													<tr>
														<td><code>height</code></td>
														<td class="text-semibold">600</td>
														<td>Default height for <code>'iframe'</code> and <code>'swf'</code> content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be <code>numeric</code> or <code>'auto'</code></td>
													</tr>
													<tr>
														<td><code>minWidth</code></td>
														<td class="text-semibold">100</td>
														<td>Minimum width fancyBox should be allowed to resize to</td>
													</tr>
													<tr>
														<td><code>minHeight</code></td>
														<td class="text-semibold">100</td>
														<td>Minimum height fancyBox should be allowed to resize to</td>
													</tr>
													<tr>
														<td><code>maxWidth</code></td>
														<td class="text-semibold">9999</td>
														<td>Maximum width fancyBox should be allowed to resize to</td>
													</tr>
													<tr>
														<td><code>maxHeight</code></td>
														<td class="text-semibold">9999</td>
														<td>Maximum height fancyBox should be allowed to resize to</td>
													</tr>
													<tr>
														<td><code>autoSize</code></td>
														<td class="text-semibold">true</td>
														<td>If <code>true</code>, then sets both <code>autoHeight</code> and <code>autoWidth</code> to <code>true</code></td>
													</tr>
													<tr>
														<td><code>autoHeight</code></td>
														<td class="text-semibold">false</td>
														<td>If set to true, for <code>'inline'</code>, <code>'ajax'</code> and <code>'html'</code> type content width is auto determined. If no dimensions set this may give unexpected results</td>
													</tr>
													<tr>
														<td><code>autoWidth</code></td>
														<td class="text-semibold">false</td>
														<td>If set to <code>true</code>, for <code>'inline'</code>, <code>'ajax'</code> and <code>'html'</code> type content height is auto determined. If no dimensions set this may give unexpected results</td>
													</tr>
													<tr>
														<td><code>autoResize</code></td>
														<td class="text-semibold">!isTouch</td>
														<td>If set to <code>true</code>, the content will be resized after window resize event</td>
													</tr>
													<tr>
														<td><code>autoCenter</code></td>
														<td class="text-semibold">!isTouch</td>
														<td>If set to <code>true</code>, the content will always be centered</td>
													</tr>
													<tr>
														<td><code>fitToView</code></td>
														<td class="text-semibold">true</td>
														<td>If set to <code>true</code>, fancyBox is resized to fit inside viewport before opening</td>
													</tr>
													<tr>
														<td><code>aspectRatio</code></td>
														<td class="text-semibold">false</td>
														<td>If set to <code>true</code>, resizing is constrained by the original aspect ratio (images always keep ratio)</td>
													</tr>
													<tr>
														<td><code>topRatio</code></td>
														<td class="text-semibold">0.5</td>
														<td>Top space ratio for vertical centering. If set to <code>0.5</code>, then vertical and bottom space will be equal. If <code>0</code> - fancyBox will be at the viewport top</td>
													</tr>
													<tr>
														<td><code>leftRatio</code></td>
														<td class="text-semibold">0.5</td>
														<td>Left space ratio for horizontal centering. If set to <code>0.5</code>, then left and right space will be equal. If <code>0</code> - fancyBox will be at the viewport left</td>
													</tr>
													<tr>
														<td><code>scrolling</code></td>
														<td class="text-semibold">'auto'</td>
														<td>Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible'</td>
													</tr>
													<tr>
														<td><code>wrapCSS</code></td>
														<td class="text-semibold">-</td>
														<td>Customizable CSS class for wrapping element (useful for custom styling)</td>
													</tr>
													<tr>
														<td><code>arrows</code></td>
														<td class="text-semibold">true</td>
														<td>If set to <code>true</code>, navigation arrows will be displayed</td>
													</tr>
													<tr>
														<td><code>closeBtn</code></td>
														<td class="text-semibold">true</td>
														<td>If set to <code>true</code>, close button will be displayed</td>
													</tr>
													<tr>
														<td><code>closeClick</code></td>
														<td class="text-semibold">false</td>
														<td>If set to <code>true</code>, fancyBox will be closed when user clicks the content</td>
													</tr>
													<tr>
														<td><code>nextClick</code></td>
														<td class="text-semibold">false</td>
														<td>If set to <code>true</code>, will navigate to next gallery item when user clicks the content</td>
													</tr>
													<tr>
														<td><code>mouseWheel</code></td>
														<td class="text-semibold">true</td>
														<td>If set to <code>true</code>, you will be able to navigate gallery using the mouse wheel</td>
													</tr>
													<tr>
														<td><code>autoPlay</code></td>
														<td class="text-semibold">false</td>
														<td>If set to <code>true</code>, slideshow will start after opening the first gallery item</td>
													</tr>
													<tr>
														<td><code>playSpeed</code></td>
														<td class="text-semibold">3000</td>
														<td>Slideshow speed in milliseconds</td>
													</tr>
													<tr>
														<td><code>preload</code></td>
														<td class="text-semibold">3</td>
														<td>Number of gallery images to preload</td>
													</tr>
													<tr>
														<td><code>modal</code></td>
														<td class="text-semibold">false</td>
														<td>If set to <code>true</code>, will disable navigation and closing</td>
													</tr>
													<tr>
														<td><code>loop</code></td>
														<td class="text-semibold">true</td>
														<td>If set to <code>true</code>, enables cyclic navigation. This means, if you click <code>"next"</code> after you reach the last element, first element will be displayed (and vice versa)</td>
													</tr>
													<tr>
														<td><code>ajax</code></td>
														<td class="text-semibold">-</td>
														<td>Options for ajax request: <code>dataType</code> and <code>headers</code></td>
													</tr>
													<tr>
														<td><code>iframe</code></td>
														<td class="text-semibold">-</td>
														<td>Options for content type "iframe": <code>scrolling</code> and <code>preload</code></td>
													</tr>
													<tr>
														<td><code>swf</code></td>
														<td class="text-semibold">-</td>
														<td>Options for content type "swf": <code>wmode</code>, <code>allowfullscreen</code> and <code>allowscriptaccess</code></td>
													</tr>
													<tr>
														<td><code>keys</code></td>
														<td class="text-semibold">-</td>
														<td>Define keyboard keys for gallery navigation, closing and slideshow</td>
													</tr>
													<tr>
														<td><code>direction</code></td>
														<td class="text-semibold">-</td>
														<td>Default navigation direction (for navigation arrows, too): <code>next</code> and <code>prev</code></td>
													</tr>
													<tr>
														<td><code>scrollOutside</code></td>
														<td class="text-semibold">true</td>
														<td>If <code>true</code>, the script will try to avoid horizontal scrolling for iframes and html content</td>
													</tr>
													<tr>
														<td><code>index</code></td>
														<td class="text-semibold">0</td>
														<td>Overrides group start index</td>
													</tr>
													<tr>
														<td><code>type</code></td>
														<td class="text-semibold">null</td>
														<td>Overrides type for content. Supported types are <code>'image'</code>, <code>'inline'</code>, <code>'ajax'</code>, <code>'iframe'</code>, <code>'swf'</code> and <code>'html'</code></td>
													</tr>
													<tr>
														<td><code>href</code></td>
														<td class="text-semibold">null</td>
														<td>Overrides content source link</td>
													</tr>
													<tr>
														<td><code>content</code></td>
														<td class="text-semibold">null</td>
														<td>Overrides content to be displayed</td>
													</tr>
													<tr>
														<td><code>title</code></td>
														<td class="text-semibold">null</td>
														<td>Overrides title content, accepts any HTML</td>
													</tr>
													<tr>
														<td><code>live</code></td>
														<td class="text-semibold">true</td>
														<td>If set to <code>true</code>, fancyBox uses <code>"live"</code> to assign click event. Set to <code>false</code>, if you need to apply only to current collection</td>
													</tr>
													<tr>
														<td><code>parent</code></td>
														<td class="text-semibold">'body'</td>
														<td>Parent element of the container</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>fancybox.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/media/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://fancyapps.com/fancybox/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://fancyapps.com/fancybox/#docs" class="btn btn-sm bg-slate btn-labeled" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/fancyapps/fancyBox" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /fancybox -->


							<!-- Bootstrap progress bar -->
							<div class="panel panel-flat" id="progress">
								<div class="panel-heading">
									<h5 class="panel-title">Bootstrap progress bar</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Styling</span>
										<span class="heading-text text-muted">progressbar.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>Bootstrap progressbar is a jQuery plugin which extends the basic bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load Bootstrap -->
&lt;script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/loaders/progressbar.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Set the <code>aria</code> attribute and remove the <code>width</code> style attribute (alternatively you can set it to 0):</p>
											<pre><code class="language-markup">// Basic markup
&lt;div class="progress">
	&lt;div class="progress-bar" data-transitiongoal="75" aria-valuemin="-1337" aria-valuemax="9000">&lt;/div>
&lt;/div>
</code></pre>
										</div>

										<div class="content-group">
											<p>Finally call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Initialize
$('.progress .progress-bar').progressbar({
	// options
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<div class="table-responsive content-group">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>transition_delay</code></td>
														<td class="text-semibold">300</td>
														<td>Is the time in milliseconds until the animation starts</td>
													</tr>
													<tr>
														<td><code>refresh_speed</code></td>
														<td class="text-semibold">50</td>
														<td>Is the time in milliseconds which will elapse between every text refresh, <code>aria-valuenow</code> attribute update and update callback call</td>
													</tr>
													<tr>
														<td><code>display_text</code></td>
														<td class="text-semibold">'none'</td>
														<td>Determines if and where to display text on the progressbar. Possible options: <strong>none</strong>, <strong>fill</strong> and <strong>center</strong></td>
													</tr>
													<tr>
														<td><code>use_percentage</code></td>
														<td class="text-semibold">true</td>
														<td>If text will be displayed - this option determines whether to show the percentage value or the amount. So if <code>use_percentage</code> is <code>false</code> and <code>aria-valuemin</code> and <code>aria-valuemax</code> are not set (or to 0 and 100) the value will be the same but <code>amount_format</code> will be used to format the result</td>
													</tr>
													<tr>
														<td><code>percent_format</code></td>
														<td class="text-semibold">function(percent) { return percent + '%'; }</td>
														<td>Is a function which returns the text format for progressbar with <code>use_percentage: true</code>. It takes 1 argument which is the current percent value</td>
													</tr>
													<tr>
														<td><code>amount_format</code></td>
														<td class="text-semibold">function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; }</td>
														<td>Is a function which returns the text format for progressbar with <code>use_percentage: false</code>. It takes 3 argument which are the current-, the max- and the min-amount</td>
													</tr>
													<tr>
														<td><code>update</code></td>
														<td class="text-semibold">$.noop</td>
														<td>Is a callback function which will be called while the progressbar is transitioning. Depends on <code>refresh_speed</code>. It takes 2 argument which is the current percent value and a reference to the attached progressbar element</td>
													</tr>
													<tr>
														<td><code>done</code></td>
														<td class="text-semibold">$.noop</td>
														<td>Is a callback function which will be called when the transition process is done. It takes 1 argument which is a reference to the attached progressbar element.</td>
													</tr>
													<tr>
														<td><code>fail</code></td>
														<td class="text-semibold">$.noop</td>
														<td>Is a callback function which will be called when an error occurs. It takes 1 argument which is the error message</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>progressbar.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/loaders/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://www.minddust.com/project/bootstrap-progressbar/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-3-4/" class="btn btn-sm bg-teal-400 btn-labeled" target="_blank">
																	<b><i class="icon-file-eye"></i></b>
																	Demonstration
																</a>
															</p>

															<a href="https://github.com/minddust/bootstrap-progressbar" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /bootstrap progress bar -->


							<!-- Ladda buttons -->
							<div class="panel panel-flat" id="ladda">
								<div class="panel-heading">
									<h5 class="panel-title">Ladda buttons</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Styling</span>
										<span class="heading-text text-muted">ladda.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<p><strong class="text-warning-400">Note</strong>: You need to include both <code>ladda.min.js</code> and <code>spin.min.js</code> files, because these 2 libraries work together.</p>
										<p>Ladda buttons must be given the class ladda-button and the button label needs to have the ladda-label class. The ladda-label will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style:</p>

										<div class="content-group">
											<pre><code class="language-markup">&lt;!-- Markup -->
&lt;button class="ladda-button" data-style="expand-right">
	&lt;span class="ladda-label">Submit&lt;/span>
&lt;/button>
</code></pre>
										</div>

										<div class="content-group">
											<p>If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the <code>ladda('bind')</code> method:</p>
											<pre><code class="language-javascript">// Automatically trigger the loading animation on click
$( 'input[type=submit]' ).ladda( 'bind' );

// Same as the above but automatically stops after two seconds
$( 'input[type=submit]' ).ladda( 'bind', { timeout: 2000 } );</code></pre>
										</div>

										<div class="content-group">
											<p>If you want JavaScript control over your buttons you can use the following approach:</p>
											<pre><code class="language-javascript">// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();

// Start loading
l.ladda( 'start' );

// Will display a progress bar for 50% of the button width
l.ladda( 'setProgress', 0.5 );

// Stop loading
l.ladda( 'stop' );

// Toggle between loading/not loading states
l.ladda( 'toggle' );

// Check the current state
l.ladda( 'isLoading' );

// Stop all loading animations
$.ladda( 'stopAll' );</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Options</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th class="col-xs-3">Option</th>
														<th class="col-xs-3">Value</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>data-style</code></td>
														<td>
															<span class="text-semibold">expand-* (left, right, up, down)</span>
															<br><span class="text-semibold">slide-* (left, right, up, down)</span>
															<br><span class="text-semibold">contract, contract-overlay</span>
															<br><span class="text-semibold">zoom-in, zoom-out</span>
														</td>
														<td>One of the button styles. This option is required</td>
													</tr>
													<tr>
														<td><code>data-spinner-size</code></td>
														<td><span class="text-semibold">40</span></td>
														<td>Pixel dimensions of spinner, defaults to dynamic size based on the button height</td>
													</tr>
													<tr>
														<td><code>data-spinner-color</code></td>
														<td><span class="text-semibold">true</span></td>
														<td>A hex code or any named CSS color</td>
													</tr>
													<tr>
														<td><code>data-spinner-lines</code></td>
														<td><span class="text-semibold">12</span></td>
														<td>The number of lines the for the spinner, defaults to 12</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>ladda.min.js, spin.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/buttons/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://lab.hakim.se/ladda/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<a href="https://github.com/hakimel/Ladda" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /ladda buttons -->

						</div>
					</div>
					<!-- /detached content -->



					<!-- Detached sidebar -->
					<div class="sidebar-detached">
			        	<div class="sidebar sidebar-default">
							<div class="sidebar-content">

				        		<!-- Contact author -->
								<div class="sidebar-category no-margin">
									<div class="category-title">
										<span>Page navigation</span>
										<i class="icon-menu7 text-muted pull-right"></i>
									</div>

									<div class="category-content">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading position-left"></i> Contact author</a>
									</div>
								</div>
								<!-- /contact author -->

			        			
			        			<!-- Navigation -->
								<div class="sidebar-category">
									<div class="category-content no-padding">
										<ul class="nav navigation no-padding-top">
											<li class="navigation-header"><i class="icon-history pull-right"></i> Sections</li>
											<li><a href="#fancytree">Fancytree</a></li>
											<li><a href="#fullcalendar">Full Calendar</a></li>
											<li><a href="#headroom">Headroom</a></li>
											<li><a href="#drilldown">Drilldown Menu</a></li>
											<li><a href="#nicescroll">Nicescroll Custom Scrollbar</a></li>
											<li><a href="#noui">NoUI Sliders</a></li>
											<li><a href="#cropper">Image Cropper</a></li>
											<li><a href="#fancybox">Fancybox Lightbox</a></li>
											<li><a href="#progress">Bootstrap Progreee Bars</a></li>
											<li><a href="#ladda">Ladda Buttons</a></li>
											<li class="navigation-divider"></li>
											<li><a href="#">Go to top <i class="icon-circle-up2 pull-right"></i></a></li>
							            </ul>
						            </div>
					            </div>
					            <!-- /navigation -->

				            </div>
			            </div>
		            </div>
		            <!-- /detached sidebar -->


					<!-- Footer -->
					<div class="footer text-muted">
						&copy; 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</div>
					<!-- /footer -->

				</div>
				<!-- /content area -->

			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
</html>
